import React, { Component } from 'react';
import { Tabs, WhiteSpace } from 'antd-mobile';
import YwxNavBar from '../../components/common/YwxNavBar/YwxNavBar';

import RankItem from '../../components/Rank/RankItem/RankItem';
import YwxListView from '../../components/common/YwxListView/YwxListView';


const tabs = [
    { title: '伙伴排行' },
    { title: '用户排行' }
];

export default class Rank extends Component {


    constructor(props) {
        super(props);
        this.state = {
            type: 0,
            pageSize: 15,
            list: [],
            noMore: false,
            userList: [],
            userNoMore: false
        }
    }


    componentDidMount() {
        this.page = 1;
        this.userPage = 1;
        this.fetchData(list => {
            this.setState({
                list: list
            })
        });
        this.fetchUserData(list => {
            this.setState({
                userList: list
            })
        });
    };

    fetchData = (callback) => {
        React.$utils.request({
            url: '/app/team/ranks',
            params: {
                type: 0,
                pageNo: this.page || 1,
                pageSize: this.state.pageSize
            }
        }).then(res => {
            this.setState({
                noMore: res.length === 0
            });
            callback && callback(res);
        })
    };

    fetchUserData = (callback) => {
        React.$utils.request({
            url: '/app/team/ranks',
            params: {
                type: 1,
                pageNo: this.userPage || 1,
                pageSize: this.state.pageSize
            }
        }).then(res => {
            this.setState({
                userNoMore: res.length === 0
            });
            callback && callback(res);
        })
    };

    onRefresh = () => {
        this.page = 1;
        this.fetchData(list => {
            this.setState({
                list: list
            })
        })
    };

    onEndReached = () => {
        this.page++;
        this.fetchData(list => {
            this.setState({
                list: this.state.list.concat(list)
            })
        })
    };


    onTabChange = (index) => {
        this.setState({ type: index });
    }

    onUserRefresh = () => {
        this.userPage = 1;
        this.fetchUserData(list => {
            this.setState({
                userList: list
            })
        })
    };

    onUserEndReached = () => {
        this.userPage++;
        this.fetchUserData(list => {
            this.setState({
                userList: this.state.userList.concat(list)
            })
        })
    };


    render() {
        return (
            <div className='rank'>
                <YwxNavBar>团队排行</YwxNavBar>
                <Tabs tabs={tabs}
                    page={this.state.type}
                    swipeable={false}
                    onChange={(tab, index) => { this.onTabChange(index) }}
                    onTabClick={(tab, index) => { console.log('onTabClick', index, tab); }}
                    tabBarUnderlineStyle={{
                        width: '1.4rem',
                        transform: 'translateX(1.175rem)'
                    }}
                >
                    <YwxListView
                        header={<WhiteSpace />}
                        list={this.state.list}
                        renderRow={item => (<RankItem key={item.id} info={item} />)}
                        renderSeparator={(s, r) => <WhiteSpace key={`${s}-${r}`} size='sm' />}
                        onRefresh={this.onRefresh}
                        onEndReached={this.onEndReached}
                        pageSize={this.state.pageSize}
                        noMore={this.state.noMore}
                    />

                    <YwxListView
                        header={<WhiteSpace />}
                        list={this.state.userList}
                        renderRow={item => (<RankItem key={item.id} info={item} />)}
                        renderSeparator={(s, r) => <WhiteSpace key={`${s}-${r}`} size='sm' />}
                        onRefresh={this.onUserRefresh}
                        onEndReached={this.onUserEndReached}
                        pageSize={this.state.pageSize}
                        noMore={this.state.userNoMore}
                    />

                </Tabs>
            </div>
        );
    }
}